<template>
  <div class="schoolInfo" v-if="visible">
    <div class="icon">
      <Close
        class="Close"
        @click="showSearchClick"
        style="
          width: 1em;
          height: 1em;
          margin-right: 8px;
          color: #f2f2f2;
          cursor: pointer;
        "
      />
    </div>
    <div class="info-box">
      <div class="left">
        <img
          :src="`https://lycm-food.oss-cn-chengdu.aliyuncs.com/school/${formData.schoolePicure}`"
          alt=""
        />
        <div class="info">
          <p class="fs-20">{{ formData.chinaName }}</p>
          <p>
            <Location
              class="Location"
              style="
                width: 1em;
                height: 1em;
                margin-right: 8px;
                color: #f2f2f2;
                cursor: pointer;
              "
            />
            {{ formData.countryName }}
          </p>
          <p>{{ formData.englishName }}</p>
        </div>
      </div>
      <!-- <div class="right">
        <table>
          <tr>
            <th>QS排名</th>
            <th>U.S. News排名</th>
            <th>THE排名</th>
          </tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </table>
      </div> -->
    </div>
    <div class="info-desc">
      <p class="info-desc_title">基础信息</p>
      <!-- 中文名 办学性质 建校时间 地理位置 核心院校 官网地 外文名 院系数量 在校人数 学校类别
        东京大学 日本国立大学 1877年  日本国东京都文京区本郷七丁目3番1号 The University of Tokyo 1564465 123564 综合类研究型大学 -->
      <div class="info-desc_main">
        <div class="item">
          <span class="item-title">中文名</span>
          <span class="item-content">{{ formData.chinaName }}</span>
        </div>
        <div class="item">
          <span class="item-title">外文名</span>
          <span class="item-content">{{ formData.englishName }}</span>
        </div>
        <div class="item">
          <span class="item-title">办学性质</span>
          <span class="item-content">{{ formData.natureEducation }}</span>
        </div>
        <div class="item">
          <span class="item-title">院系数量</span>
          <span class="item-content">{{ formData.numberDepartments }}</span>
        </div>
        <div class="item">
          <span class="item-title">建校时间</span>
          <span class="item-content">{{ formData.foundeYear }}</span>
        </div>
        <div class="item">
          <span class="item-title">在校人数</span>
          <span class="item-content">{{ formData.enrollment }}</span>
        </div>
        <div class="item">
          <span class="item-title">地理位置</span>
          <span class="item-content">{{ formData.countryName }}</span>
        </div>
        <div class="item">
          <span class="item-title">学校类别</span>
          <span class="item-content">{{ formData.natureEducation }}</span>
        </div>
        <div class="item item-all">
          <span class="item-title">核心院校</span>
          <span class="item-content">{{ formData.coreInstitutions }}</span>
        </div>
        <div class="item item-all">
          <span class="item-title">官网地址</span>
          <span class="item-content">{{
            formData.officialWebsiteAddress
          }}</span>
        </div>
        <div class="item item-all">
          <span class="item-title">学校简介</span>
          <span class="item-content">{{
            formData.schoolTips
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, watch, computed } from 'vue'
const props = defineProps(['modelValue', 'formData'])
const emit = defineEmits(['update:modelValue'])
const showSearchClick = (i) => {
  emit('update:modelValue', false)
}

const visible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
</script>

<style scoped lang='scss'>
.schoolInfo {
  width: 52%;
  // height: 60%;
  z-index: 1001;
  min-height: 500px;
  background-color: #fff;
  position: absolute;
  top: 20%;
  left: 24%;
  padding: 20px 40px;
  background: rgba(3, 30, 35, 0.97);
  box-shadow: -4px 13px 16px 8px rgba(141, 141, 141, 0.3);
  border-radius: 8px 8px 8px 8px;
  box-sizing: border-box;
  .icon {
    text-align: right;
    position: relative;
    .Close {
      position: absolute;
      top: -10px;
      right: -15px;
    }
  }
  .info-box {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      img {
        width: 65px;
        height: 65px;
        border-radius: 100%;
      }
      .info {
        width: 300px;
        margin-left: 18px;
        p {
          width: 100%;
          color: #ecf0f3;
          font-size: 16px;
          margin: 5px 0;
        }
        .fs-20 {
          font-size: 20px;
        }
      }
    }
    .right {
      table {
        border-spacing: 0;
        border-collapse: collapse;
        th {
          border: none;
          width: 110px;
          height: 40px;
          background: #00b5c2;
          opacity: 1;
          padding: 0;
          font-size: 12px;
          line-height: 40px;
          color: #ecf0f3;
          text-align: center;
          border: 1px solid #3e3e3e;
        }
        td {
          width: 110px;
          height: 40px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          border: 1px solid #3e3e3e;
          line-height: 40px;
          color: #ecf0f3;
          text-align: center;
        }
      }
    }
  }
  .info-desc {
    &_title {
      margin: 10px 10px;
      color: #ecf0f3;
      font-size: 18px;
    }
    &_main {
      width: 100%;
      border: 1px solid #3e3e3e;
      border-radius: 8px;
      display: flex;
      flex-wrap: wrap;
      & .item {
        width: 50%;
        min-height: 45px;
        border-bottom: 1px solid #3e3e3e;
        color: #acacad;
        font-size: 14px;
        text-align: left;
        padding: 12px 10px;
        line-height: 20px;
        .item-title {
          display: inline-block;
          width: 80px;
        }
        .item-content {
          line-height: 20px;
        }
      }
      & .item-all {
        width: 100%;
      }
    }
  }
}
@media screen and (max-width: 1000px) {
  .schoolInfo {
    width: 96%;
    min-height: 550px;
    height: 80% !important;
    overflow: auto;
    left: 2%;
    top: 18%;
    padding: 6px 20px;
    .icon {
      position: fixed;
      top: 20%;
      right: calc(2% + 10px);
    }
    .info-box {
      .left {
        .info {
          width: calc(100% - 75px) !important;
        }
      }
    }
    .info-desc {
      .info-desc_main {
        .item {
          width: 100%;
        }
      }
    }
  }
}
</style>
